<template>
  <div style="height:100%;">
    <div style="height:calc(100% - 60px);overflow-y:auto;">
      <el-table :data="msgList" border style="width: 100%">
        <el-table-column prop="avatar" label="发送方" width="160">
          <template slot-scope="scope">
            <el-avatar shape="square" :size="50" :src="scope.row.avatar"></el-avatar>
            <el-link type="info" :underline="false" style="line-height:50px;vertical-align: top;">{{scope.row.nickname}}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="content" label="消息内容">
          <template slot-scope="scope">
            <p style="white-space:pre-wrap;">{{scope.row.content}}</p>
          </template>
        </el-table-column>
        <el-table-column prop="avatar" label="接受方" width="160">
          <template slot-scope="scope">
            <el-avatar shape="square" :size="50" :src="scope.row.beavatar"></el-avatar>
            <el-link type="info" :underline="false" style="line-height:50px;vertical-align: top;">{{scope.row.benickname}}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="ctime" label="创建时间" width="160">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="160">
          <template slot-scope="scope">
            <el-button type="warning" size="mini" @click="banM(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination :current-page="search.page" :page-size="search.limit" @current-change="handleCurrentChange" layout="prev, pager, next"
      :total="search.total" style="margin-top:10px;">
    </el-pagination>
  </div>
</template>

<script>
import { getMsgList, deleteMsg } from "@/api/admin/user"
export default {
  data() {
    return {
      msgList: [],
      search: {
        nickname: "",
        page: 1,
        limit: 10,
        total: 0
      },
    }
  },
  created() {
    this.loadMsgList()
  },
  methods: {
    loadMsgList(clearpage) {
      if (clearpage) {
        this.search.page = 1
      }
      getMsgList(this.search, (res) => {
        if (res.code == 200) {
          this.msgList = res.data
          this.search.total = res.total
        }
      })
    },
    banM(it) {      
      this.$confirm('此操作将删除私信, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteMsg({ objid: it.objid }, (res) => {
          if (res.code == 200) {
            this.msgList = this.msgList.filter(item => item.objid != it.objid)
          }
        }, true)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleCurrentChange(val) {
      this.search.page = val
      this.loadMsgList()
    }
  }
}
</script>

<style lang="less" scoped>
</style>